<template>
    <div class="dialoglistDiv">
        <div class="table_box"><div class="table_" id="tb">
            <ul class="head">
                <li class="">设备编号</li>
                <li class="mxw200">设备名称</li>
                <li class="mxw120">报修人员</li>
                <li class="mw200 wcen">报修时间</li>
                <li class="">故障图片</li>
                <li class="mxw200">描述</li>
                <li class="mxw120">维修人员</li>
                <li class="mxw120 wcen">维修状态</li>
            </ul>
            <div class="body">
                <ul class="img" v-for="x in obj.ary" :key="x">
                    <li class="">{{x.code}}</li>
                    <li class="mxw200">
                        <el-tooltip class="box-item" effect="dark" :content="x.name" placement="top-start" :disabled="x.name.length<10">
                            <div class="lineOne pointer">{{x.name}}</div>
                        </el-tooltip>
                    </li>
                    <li class="mxw120">{{x.addusername}}</li>
                    <li class="mw200 wcen">{{x.intime}}</li>
                    <li class="">
                        <el-image v-for="(v,i) in x.imgs.split(',')" :key="i"  style="width: 40px; height: 40px" class="ml5" fit="cover" :preview-src-list="[proxy.$setting.globalUrl.fileurl+ '/fault/'+ v]" :src="proxy.$setting.globalUrl.fileurl+ '/fault/'+ v">
                            <template #error>
                                <div class="image-slot">
                                    <el-image style="width: 40px; height: 40px" fit="cover" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"/>
                                </div>
                            </template>
                        </el-image>
                    </li>
                    <li class="mxw200">
                        <el-tooltip class="box-item" effect="dark" :content="x.msg" placement="top-start" :disabled="x.msg.length<10">
                            <div class="lineOne pointer">{{x.msg}}</div>
                        </el-tooltip>
                    </li>
                    <li class="mxw120">{{x.faultusername}}</li>
                    <li class="mxw120 wcen">
                        <div :class="[proxy.$utils.find(globalData.faultStateList, x.state,'label')]">{{proxy.$utils.find(globalData.faultStateList, x.state)}}</div>
                    </li>
                </ul>
            </div>
        </div>
        </div><Pager :value="obj.req" :init="init" />
    </div>
</template>

<script setup>
    import { reactive, getCurrentInstance, ref, toRefs, provide, computed } from 'vue'
    import Pager from '@/components/pager.vue'
    let { proxy } = getCurrentInstance()
    const props = defineProps({
        device_id: { type: String, require: true }
    })

    let obj = reactive({
        ary: [],
        req: {
            device_id: props.device_id,
            currentpage: 1,
            pagesize: 10,
            count: 0,
        }
    });
    let init = () => {
        proxy.$ajax({
            url: 'device/fault_list',
            data: obj.req,
            bfLoading: true
        }).then(d => {
            // console.log(d)
            if(d.success){
                obj.ary = d.msg.list
                obj.req.count = d.msg.count
            }
        }).catch(() => { })
    }
</script>

<style scoped>
    ::-webkit-scrollbar { width:10px; background-color: #FFFFFF; }
    .listDiv { top:70px; }
    #tb ul li.liflex { min-width: 50px; overflow: hidden; }
    #tb ul li.li1 { width: 75px; }
    #tb ul li.li2 { width: 130px; }
    #tb ul li.li3 { width: 105px; }
    #tb ul li.li5 { width: 105px; }
    #tb ul li.li6 { width: 75px; }
    #tb ul li.li7 { width: 155px; }
</style>